/**
 * 初始化swiper
 */
function initSwiper() {
    var mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })
}

/**
 * 获取banner轮播数据
 *   接口调用 技术选型
 *     axios库
 *       1. 返回promise对象
 */
function loadBanner() {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/banner'
    }).then(response => {
        let data = response.data
        if (data.resultCode == 1) {
            let list = data.resultInfo.list
            showBanner(list)
        }
    })
}

/**
 * 动态渲染轮播图片
 * @param {*} list 
 */
function showBanner(list) {
    let str = list.map(item => {
        return `<div class="swiper-slide">
                   <img src="${item.url}" alt="${item.content}">
               </div>`
    }).join('')

    const swiperWrapper = document.querySelector('.swiper-wrapper')
    swiperWrapper.innerHTML = str

    initSwiper()
}
loadBanner()
//动态生成商品，在后端调用商品
let pageNo = 1
let allStr = '' //空字符串
//pageno代表页数
//商品列表数据
function productList(pageNo) {
    //原生js axios
    axios({
        //获取方法get获取后端内容
        method: 'get',
        //端口链接
        url: 'http://api.yuguoxy.com/api/shop/list',
        //params传参的内容
        params: {
            //获取商品的个数
            pageSize: 12,
            //获取商品的页数
            pageNo
        }
        //处理异步执行，返回值给then，返回的内容response
    }).then(response => {
        //内容的数据response.data
        let data = response.data
        //把数据赋值给resultCode
        let resultCode = data.resultCode
        //把数据赋值给resultInfo
        let resultInfo = data.resultInfo
        //如果resultCode==1的话把后端商品内容赋值给变量list
        if (resultCode == 1) {
            let list = resultInfo.list
            commodityTrends(list)
        }
    })

}
//动态渲染商品列表
function commodityTrends(list) {
    let str = list.map(item => {
        return `
        <div class="product" onclick=details(${item.id})>
        <img src="${item.picture}" alt="">
        <div class="moye">
            <p class="product-name">${item.shop}</p>
        </div>
        <div class="bottom">
            <P>${item.oldprice}人已买</P>
            <p>￥${item.price}元</p>
        </div>
    </div>      `
    }).join('')
    allStr += str
    const commodity = document.querySelector('.commodity-list')
    commodity.innerHTML = allStr
}

//加载更多
function loading() {
    const loadingEle = document.querySelector('.loading')
    loadingEle.addEventListener('click', function () {
        productList(++pageNo)
    })
}
//商品详情点击跳转
function details(id) {
    location.href = '../pages/magnifyingglass.html?id=' + id
}

function touxiangHeaders() {
    let zuce = document.querySelectorAll('.denglu > p')
    let user = localStorage.getItem('USER')
    user = JSON.parse(user)
    if (user) {
        let str = `
        <div class="touxiang"><img src="${user.headerimg}" alt="" ></div>
        <div>账号：${user.username}</div>
        <button class = "tuichubutton">退出登录</button>`
        let headertouxiang = document.querySelector('.header-touxiang')
        headertouxiang.innerHTML = str
        zuce[0].style.display = 'none'
        zuce[1].style.display = 'none'
        outdenglu()

    } else {
        zuce[0].style.display = 'block'
        zuce[1].style.display = 'block'
    }
}

function outdenglu() {
    let tuichu = document.querySelector('.tuichubutton')
    tuichu.onclick = function () {
        localStorage.removeItem('USER')
        location.href = '../pages/index.html'
    }
}

touxiangHeaders()
productList(pageNo)
loading()